<template>
  <div class="postLine" ref="postLine"></div>
</template>
<script setup>
import * as echarts from 'echarts';

import { onMounted, ref } from 'vue';
import { AnalysisOfAPI } from '@/api/staffEch.js';
const postLine = ref(null);
onMounted(async () => {
  // var ROOT_PATH = 'https://echarts.apache.org/examples';
  // var myChart = echarts.init(postLine.value);

  const res = await AnalysisOfAPI();

  console.log(res.data.outList[0]);
  var ROOT_PATH = 'https://echarts.apache.org/examples';

  var myChart = echarts.init(postLine.value);
  var option;

  option = {
    title: {
      text: '员工入职离职分析',
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        label: {
          backgroundColor: '#6a7985',
        },
      },
    },
    legend: {
      data: ['员工入职', '员工离职'],
    },
    toolbox: {
      feature: {
        saveAsImage: {},
      },
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true,
    },
    xAxis: [
      {
        type: 'category',
        boundaryGap: false,
        data: res.data.dayList,
      },
    ],
    yAxis: [
      {
        type: 'value',
      },
    ],
    series: [
      {
        name: '员工入职',
        type: 'line',
        stack: 'Total',
        areaStyle: {},
        emphasis: {
          focus: 'series',
        },
        data: res.data.inList,
      },
      {
        name: '员工离职',
        type: 'line',
        stack: 'Total',
        areaStyle: {},
        emphasis: {
          focus: 'series',
        },
        data: res.data.outList,
      },
    ],
  };

  option && myChart.setOption(option);
});
</script>

<style scoped lang="less">
.postLine {
  width: 100%;
  height: 100%;
}
</style>
